<template>
  <div class="my">
    <div>
<!--      <van-button type="primary" @click="goLogin">登录按钮</van-button>-->
<!--      <van-button type="primary">退出登录</van-button>-->
    </div>
    <div class="mys"></div>
    <div class="box">
      <div class="boxo">
        <img
          src="https://picnew11.photophoto.cn/20170107/xinedgzhanduishiliangtulogo-22546692_1.jpg"
          alt=""
        />
        <div>
          <span class="sdad">sdad</span><br />
          <span>这家伙很懒，什么也没有留下</span>
        </div>
      </div>
      <div class="myde">
        <div class="die">
          <span class="diee">个人资料</span>
          <van-icon class="right" name="arrow" />
        </div>
        <div class="die" @click="goOut">
          <span class="diee" >退出登录</span>
          <van-icon class="right" name="arrow" />
        </div>

         <div class="die" @click="goOrder">
          <span class="diee">我的订单</span>
          <van-icon class="right" name="arrow" />
        </div>

         <div class="die">
          <span class="diee">我的收藏</span>
          <van-icon class="right" name="arrow" />
        </div>

          <div class="die" @click="zhuce">
              <span class="diee">账号注册</span>
              <van-icon class="right" name="arrow" />
          </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {};
  },
  methods: {
      zhuce(){
        this.$router.push({name:"Login"});
      },
    goOrder(){
      this.$router.push({name:"Morder"});
    },
    goOut(){
      localStorage.removeItem("token");
      //window.localStorage.clear();
      //this.$router.push("/");
        this.$router.push({name:"Login"})
      //console.log("退出登录");
    },
    // 点击延时跳转到login页
    goLogin() {
      //  loading加载
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });

      setTimeout(() => {
        this.$router.push({ name: "Login" });
      }, 500); // 延迟0.5s
    },
  },
};
</script>

<style lang="less" scoped>
.mys {
  background: url("http://www.kangliuyong.com:10002/assets/default_bg.jpg"); //图片的地址
  height: 160px; //高度为160px
  background-size: cover; //给图片铺满
}
.box {
  width: 80vw;
  height: 50vh;
  background: rgba(248, 248, 248, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .boxo {
    display: flex;
    align-items: center;
    height: 80px;
    width: 80vw;
    img {
      display: block; //设置块级元素
      height: 60px;
      width: 60px;
      background-color: red;
      border-radius: 50%; //设置圆角
    }
    div {
      // height: 20px;
      margin-left: 20px;
      .sdad {
        color: rgb(7, 106, 255);
      }
    }
  }
  .myde {
    margin-top: 50px;
    .die {
      padding: 0px 10px 0px 10px; //上右下左
      margin-bottom: 20px;
      display: flex;
      .diee {
        flex: 1;
      }
      .right {
        width: 10px;
        height: 10px;
      }
    }
  }
}
</style>
